<template>
  <div style="margin-left: 120px;">
    <el-tabs v-model="activeName" style="width: 100px;">
      <el-tab-pane label="作业" style="font-size: 25px" name="first"></el-tab-pane>
      <el-tab-pane label="测试" style="font-size: 25px" name="second"></el-tab-pane>
    </el-tabs>
    <div v-if="activeName === 'first'" class="">
      <div class="head-box flex-between">
        <h3>
          <span style="color: blue">共{{homeworks.length}}个活动</span>
          <div v-if="userInfo.role === '老师'" style="float: right;margin-right: 125px;">
            <el-button @click="createCourse()" id="createC" class="el-button--primary" style="border-radius: 25px;width: 120px;"><i class="el-icon-plus"></i>添加作业</el-button>
          </div>
        </h3>
      </div>
      <el-form class="create">
        <div style="margin: 25px;font-size: 20px;padding-bottom: -5px">
          <span><strong>添加作业</strong></span>
          <el-icon id="close1" style="float: right;margin-right: 15px;font-size: 36px;cursor:pointer;" class="el-icon-close"></el-icon>
        </div>
        <hr>
        <el-form-item label="*作业标题" style="margin-left: 25px;" prop="name">
          <el-input v-model="title" placeholder="作业标题" style="width: 88%"></el-input>
        </el-form-item>
        <component :is="currentComponent" v-model="content"></component>
        <div class="block">
          <span class="demonstration">提交时间</span>
          <el-date-picker
            v-model="value1"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
          <el-upload
            action="http://localhost:8081/files/upload"
            :on-success="handleSuccess"
            style="color: blueviolet;width: 25%;float: right;font-size: 25px;"><i class="el-icon-upload2"></i>上传附件</el-upload>
        </div>
        <hr>
        <div style="float: right;margin-right: 25px;">
          <el-button id="cancel1">取消</el-button>
          <el-button class="el-button--primary" @click="confirmCreate">确定</el-button>
        </div>
      </el-form>
      <div style="width: 1224px;background-color: #eeeeee;border-radius: 5px;padding:2px 6px;">
        <ul  v-for="homework in homeworks" class="course-list-box">
          <li aria-hidden="true">
            <div class="card-layout-box">
              <div class="layout-left">
                <img src="https://www.ketangpai.com/images/web2x_zuoye.png" alt>
                <div class="another-name"><span class="label-type">作业</span>
                </div>
              </div>
              <div class="layout-right">
                <div class="layout-right-info">
                  <h6 class="info-title"  @click="toSubmitHomework(homework.id)">{{homework.title}}</h6>
                  <div class="status-bar">
                    <span>
                      "提交截止时间: {{homework.endTime}}"
                    <div class="el-divider el-divider--vertical"></div>
                    <i>{{homework.status}}</i>
                    </span>
                    <div class="el-divider el-divider--vertical"></div>
                    <span>个人作业</span>
                  </div>
                  <p class="learning-status"><span>{{homework.status}}</span></p>
                </div>
                <div v-if="userInfo.role === '学生'" class="layout-right-functional">
                  <el-button class="el-button el-button--primary el-button--small is-plain"><span>提交</span></el-button>
                </div>
                <div v-else class="layout-right-functional">
                  <el-button class="el-button el-button--primary el-button--small is-plain" @click="openEditHomework(homework)" style="margin-right: -300px">编辑</el-button>
                  <el-dialog title="编辑作业" :visible.sync="dialogFormVisible">
                    <el-form :model="homework">
                      <el-form-item label="标题" :label-width="formLabelWidth">
                        <el-input v-model="title" autocomplete="off"></el-input>
                      </el-form-item>
                      <el-form-item label="作业内容" :label-width="formLabelWidth">
                        <el-input v-model="detail" autocomplete="off"></el-input>
                      </el-form-item>
                      <el-form-item label="提交时间" :label-width="formLabelWidth">
                        <el-date-picker
                          v-model="value1"
                          type="datetimerange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期">
                        </el-date-picker>
                      </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                      <el-button @click="dialogFormVisible = false">取 消</el-button>
                      <el-button type="primary" @click="editHomework(homeworkId)">确 定</el-button>
                    </div>
                  </el-dialog>
                  <el-button class="el-button el-button--danger el-button--small is-plain" @click="deleteHomework(homework.id)">删除</el-button>
                </div>
              </div>
            </div>
          </li>
          <br>
        </ul>
      </div>
    </div>
    <div v-else>
      <div class="head-box flex-between">
        <h3>
          <span style="color: green">共{{exams.length}}个测试</span>
          <div v-if="userInfo.role === '老师'" style="float: right;margin-right: 140px;">
            <el-button @click="addTest()" id="createT" class="el-button--primary" style="border-radius: 25px;width: 120px;"><i class="el-icon-plus"></i>发布测试</el-button>
          </div>
        </h3>
      </div>
      <div v-if="userInfo.role === '老师'" v-for="exam in exams" style="width: 90%;height: 120px;border: 1px solid lightgray;margin-top: 25px;">
        <div><br><span style="font-size: 25px;margin-left: 25px;">测试名称:{{exam.title}}</span>
          <el-button type="success" style="margin: -36px 1095px;float: left" @click="toTest(exam.examId)">开始考试</el-button>
        </div><br>
          <hr>
        <span style="margin-left: 25px;">测试时间:{{exam.startTime}}~{{exam.endTime}}</span>
      </div>
      <div v-if="userInfo.role === '学生'" v-for="submitExam in submitExams" style="width: 90%;height: 120px;border: 1px solid lightgray;margin-top: 25px;">
        <div><br><span style="font-size: 25px;margin-left: 25px;">测试名称:{{submitExam.title}}</span>
          <el-button v-if="submitExam.score=== null" type="success" style="margin: -36px 1095px;float: left" @click="toTest(submitExam.examId)">开始考试</el-button>
          <div v-else style="margin: -36px 1095px;float: left;font-size: 25px;width: 100px;color: cornflowerblue"><span>得分:{{submitExam.score}}</span></div>
        </div><br>
        <hr>
        <span style="margin-left: 25px;">测试时间:{{submitExam.startTime}}~{{submitExam.endTime}}</span>
      </div>
      <el-dialog title="发布测试" :visible.sync="dialogFormVisible">
        <el-form :model="exam">
          <el-form-item label="测试名称" :label-width="formLabelWidth">
            <el-input v-model="title" autocomplete="off" style="width: 64%"></el-input>
          </el-form-item>
          <el-form-item label="测试时间" :label-width="formLabelWidth">
            <el-date-picker
              v-model="value1"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="发布方式" :label-width="formLabelWidth">
            <el-radio v-model="radio" label="unified">统一发布</el-radio>
            <el-radio v-model="radio" label="smart">智能推送</el-radio>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmPublishExam()">确 定</el-button>
        </div>
      </el-dialog>
      <el-empty v-if="exams.length === 0" description="暂无测试数据"></el-empty>
    </div>
    <div class="bg"></div>
  </div>
</template>

<script>
import RichText from "./RichText";
import axios from "axios";
import moment from "moment/moment";
import homework from "./homework";

export default {
  components:{
    RichText
  },
  name: "CourseContent",
  data() {
    return {
      content: '',
      homeworks: '',
      course: '',
      activeName: 'first',
      userInfo: '',
      title: '',
      detail: '',
      homeworkId: '',
      value1: [new Date(2024, 5, 25, 10, 10), new Date(2024, 5, 26, 10, 10)],
      attachment: null,
      currentComponent: RichText,
      studentIds: '',
      newAssigningHomeworkId: '',
      dialogFormVisible: false,
      formLabelWidth: '100px',
      radio: 'unified',
      exams: '',
      exam: '',
      submitExams: '',
    };
  },
  methods:{
    selectSubmitExam(examId){
      axios.post("http://localhost:8081/exam/selectExamById",{
        studentId: this.userInfo.stuId,
        examId: examId,
      }).then(response=>{
        if(response.status === 200){
          this.$message.success("提交成功!");
        }
      })
    },
    toTest(examId){
      axios.post("http://localhost:8081/exam/selectExamById",{
        examId: examId
      }).then(response =>{
        if(response.status === 200){
          this.exam = response.data;
          localStorage.setItem("exam",this.exam);
          this.$router.push({name:"/onlineTest",params:{examId}});
        }
      })
    },
    confirmPublishExam(){
      this.dialogFormVisible = false;
      axios.post("http://localhost:8081/exam/addExam",{
        title: this.title,
        startTime: this.value1[0],
        endTime: this.value1[1],
        publishMethod: this.radio,
        courseId: this.course.courseId
      }).then(response =>{
        if(response.status === 200){
          this.$message.success("添加测试成功!");
          axios.post("http://localhost:8081/exam/selectExamsByCourseId",{
            courseId: this.course.courseId
          }).then(response =>{
            if(response.status === 200){
              this.exams = response.data;
              for(let i=0;i< this.exams.length;i++){
                this.exams[i].startTime = this.formattedDate(this.exams[i].startTime);
                this.exams[i].endTime = this.formattedDate(this.exams[i].endTime);
              }
            }
          })
        }
      })
    },
    addTest(){
      this.dialogFormVisible = true;
    },
    openEditHomework(homework){
      this.title = homework.title;
      this.detail = homework.content;
      this.homeworkId = homework.id;
      this.dialogFormVisible = true;
    },
    editHomework(homeworkId){
      axios.post("http://localhost:8081/homework/updateHomework",{
        id: homeworkId,
        "title": this.title,
        "content": this.detail,
        "createTime": this.value1[0],
        "endTime": this.value1[1]
      }).then(response => {
        if(response.status === 200){
          this.$message.success("修改成功!");
          axios.post("http://localhost:8081/homework/selectHomeworksByCourseId",{
            courseId: this.course.courseId
          }).then(response =>{
            if(response.status === 200){
              this.homeworks = response.data;
              for(let i =0;i < this.homeworks.length;i++)
                this.homeworks[i].endTime = this.formattedDate(this.homeworks[i].endTime);
            }
          })
        }else{
          this.$message.error("修改失败")
        }
      })
      this.dialogFormVisible = false;
    },
    deleteHomework(homeworkId){
      axios.post("http://localhost:8081/homework/deleteHomework",{
        id: homeworkId
      }).then(response =>{
        if(response.status === 200){
          this.$message.success("删除成功!");
          axios.post("http://localhost:8081/homework/selectHomeworksByCourseId",{
            courseId: this.course.courseId
          }).then(response =>{
            if(response.status === 200){
              this.homeworks = response.data;
              for(let i =0;i < this.homeworks.length;i++)
                this.homeworks[i].endTime = this.formattedDate(this.homeworks[i].endTime);
            }
          })
        }
      })
    },
    handleSuccess(res){
      this.attachment = res.data;
    },
    getContent(){
      this.content = localStorage.getItem("content");
    },
    formattedDate(date){
      return moment(date).format('YY/MM/DD HH:mm');
    },
    confirmCreate(){
      let bg = document.querySelector('.bg');
      let create = document.querySelector('.create');
      this.getContent();
      axios.post("http://localhost:8081/homework/addHomework",{
        "attachment": this.attachment,
        "courseId": this.course.courseId,
        "title": this.title,
        "content": this.content,
        "createTime": this.value1[0],
        "endTime": this.value1[1]
        }
      ).then(response =>{
        if(response.status === 200){
          this.$message.success("添加作业成功!");
          axios.post("http://localhost:8081/homework/selectHomeworksByCourseId",{
            courseId: this.course.courseId
          }).then(response =>{
            if(response.status === 200){
              this.homeworks = response.data;
              for(let i =0;i < this.homeworks.length;i++)
                this.homeworks[i].endTime = this.formattedDate(this.homeworks[i].endTime);
              this.newAssigningHomeworkId = this.homeworks[this.homeworks.length-1].id;
              axios.post("http://localhost:8081/course/selectStudentIdByCourseId",{
                courseId: this.course.courseId
              }).then(response =>{
                if(response.status === 200){
                  this.studentIds = response.data;
                  for(let i = 0;i<this.studentIds.length;i++){
                    axios.post("http://localhost:8081/homework/addSubmitHomework",{
                      stuId: this.studentIds[i],
                      assigningHomeworkId: this.newAssigningHomeworkId
                    })
                  }
                }
              })
            }
          })
        }
      })
      bg.style.display = 'none';
      create.style.display = 'none';
    },

    toSubmitHomework(homeworkId){
      this.$router.push({name:"homework",params:{homeworkId}})
    },
    createCourse(){
      let link = document.querySelector('#createC');
      if(this.userInfo.role === '学生'){
        link = document.querySelector('#screateC');
      }
      let bg = document.querySelector('.bg');
      let create = document.querySelector('.create');
      let close = document.querySelector("#close1");
      let cancel1 = document.querySelector("#cancel1");
      link.addEventListener("click",function(){
        bg.style.display = 'block';
        create.style.display = 'block';
      })
      close.addEventListener("click",function (){
        bg.style.display = 'none';
        create.style.display = 'none';
      })
      cancel1.addEventListener("click",function (){
        bg.style.display = 'none';
        create.style.display = 'none';
      })
    },
  },
  mounted() {
    const userInfoString = localStorage.getItem('userInfo');
    const course = localStorage.getItem('course');
    if (userInfoString) {
      this.userInfo = JSON.parse(userInfoString);
    }
    if(course){
      this.course = JSON.parse(course);
    }
    axios.post("http://localhost:8081/homework/selectHomeworksByCourseId",{
      courseId: this.course.courseId
    }).then(response =>{
      if(response.status === 200){
        this.homeworks = response.data;
        for(let i =0;i < this.homeworks.length;i++)
          this.homeworks[i].endTime = this.formattedDate(this.homeworks[i].endTime);
      }
    })
    axios.post("http://localhost:8081/exam/selectExamsByCourseId",{
      courseId: this.course.courseId
    }).then(response =>{
      if(response.status === 200){
        this.exams = response.data;
        for(let i=0;i< this.exams.length;i++){
          this.exams[i].startTime = this.formattedDate(this.exams[i].startTime);
          this.exams[i].endTime = this.formattedDate(this.exams[i].endTime);
        }
      }
    })
    axios.post("http://localhost:8081/exam/selectSubmitExamsByCourseId",{
      courseId: this.course.courseId,
      studentId: this.userInfo.stuId
    }).then(response =>{
      if(response.status === 200){
        this.submitExams = response.data;
        for(let i=0;i< this.submitExams.length;i++){
          this.submitExams[i].startTime = this.formattedDate(this.submitExams[i].startTime);
          this.submitExams[i].endTime = this.formattedDate(this.submitExams[i].endTime);
        }
      }
    })
  }
}
</script>

<style scoped>
.block{
  margin: 25px 25px;
}
/*遮盖层*/
.bg{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0,0,0, 0.4);
  z-index: 666;
  display: none;
}
.create{
  width: 900px;
  height: 600px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  background: #fff;
  border-radius: 5px;
  display: none;
}
.is-plain{
  margin-top: 25px;
  float: right;
  margin-right: -360px;
}
.learning-status{
  width: 285px;
  height:24px;
  margin-top: 5px;
}
.status-bar{
  width: 320px;
  height: 16px;
  margin-top: -36px;
  font-size: 12px;
}
.info-title{
  width: 285px;
  height: 31px;
  font-size: 16px;
  margin-top: 15px;
  cursor: pointer;
}
.layout-right-info{
  margin-top: -15px;
  width: 365px;
  height: 72px;
  float: left;
}
.layout-right-functional{
  width: 804px;
  height: 31px;
}
.another-name{
  width: 85px;
  height: 18px;
}
.label-type{
  margin-left: 7px;
  width: 26px;
  height: 15px;
}
.card-layout-box{
  width: 1190px;
  height: 80px;
  background-color: #f1e4cc;
  margin: auto;
}
.course-list-box{
  list-style-type: none;
}
.layout-left{
  width: 85px;
  height: 79px;
  float: left;
}
.layout-right{
  width: 1089px;
  height: 79px;
}
</style>
